<template>
    <div>
        <input type="text" v-model="eachname" @click="dj()">

        <ol>
            <li v-for="item in list" :key="item.name">
                姓名：{{item.name}} 年龄：{{item.age}}
            </li>
        </ol>


    </div>
</template>
<script>
import { mapState } from 'vuex';
    
    export default {
    data() {
        return {
            eachname: "",
            list: [
                { name: '陈昱', age: 110 },
                { name: '张飞', age: 110 },
                { name: '刘备', age: 110 },
                { name: '赵云', age: 110 },
                { name: '吕布', age: 110 },
                { name: '张飞asd', age: 110 },
                { name: '张飞qq', age: 110 },
            ]
        }
    },
    watch: {
        list: {
            deep: true,//深度监听
            immediate: true,//立即监听
            handler(eachname) {
                console.log('监听到了' + eachname);


            }
        },

    },
    methods: {

        dj() {
            this.list = this.list.filter(item => {
                if (item.name.includes(this.eachname)) {
                    return item
                }

            })

        },
    }
}

this.$store.state.num
...mapState
</script>